import {
  AbstractImage,
  C37GiftCertificateCard,
  Header,
  Layout,
  WithMargins,
  Paragraph,
} from "@/components";
import { useEffect, useState } from "react";
import {
  useUserInfo,
  getUserGifts,
  addUserGiftCard,
} from "@/store/userDataContext";
import { useAuth } from "@/store/authContext";
import { Input, View, Button } from "@tarojs/components";
import { useDidShow } from "@tarojs/taro";
import {alert} from "@/utils";
import style from "./index.module.scss";

export default function UserGiftCertificates() {
  const { userInfoState, dispatchUserDataAction } = useUserInfo();
  const [poped, setPoped] = useState(false);
  const [giftCardKeyInput, setGiftCardKeyInput] = useState("");
  const { userData, userPageData } = userInfoState;
  const { dispatchAuthAction } = useAuth();

  const getGiftCards = () => {
    getUserGifts(dispatchUserDataAction, userData!, {
      query: { limit: process.env.defaultPageSize!, page: 1 },
      authDispatch: dispatchAuthAction,
    });
  };

  useDidShow(() => {
    getGiftCards();
  });

  useEffect(() => {}, [poped]);

  const clickCallback = (pop: boolean) => {
    setPoped(pop);
  };

  const addGiftCard = () => {
    addUserGiftCard({ query: { cardKey: giftCardKeyInput } }, () => {
      setGiftCardKeyInput("");
      getGiftCards();
      alert("兑换成功");
    });
  };

  return (
    <>
      <Layout>
        <View className={style["gift-certificate-wrapper"]}>
          <View className={style.background}>
            <AbstractImage
              className={style["background-image"]}
              src={userPageData?.topBackgroundImage ?? ""}
              type="none"
            />
          </View>
          <WithMargins>
            <View className={style["header-section"]}>
              <Header type="heading-l">我的礼品卡</Header>
            </View>

            <View className={style["manual-code"]}>
              <Input
                className={style["manual-code-input"]}
                type="text"
                value={giftCardKeyInput}
                placeholder="请输入序列号"
                onInput={(e) => {
                  setGiftCardKeyInput(e.detail.value);
                }}
                // onBlur={() => {
                //   // TODO: possible to add validation of valid gift card ID on blur
                //   setSelectedGiftNumber(+manualGiftInput);
                // }}
              />
              <Button
                className={style["manual-code-submit"]}
                plain
                onClick={addGiftCard}
              >
                <Paragraph color="#00a4b6" size="small">
                  兑换礼品卡
                </Paragraph>
              </Button>
            </View>

            <View className={style["gift-cert-count"]}>
              您有{userData?.giftCertificates.length}份礼品卡
            </View>

            {userData?.giftCertificates.map((giftCertData) => (
              <View key={giftCertData.id} className={style["giftcard-wrapper"]}>
                <C37GiftCertificateCard
                  colorTheme={{
                    mainColor: giftCertData.mainColor,
                    upperTriangle: giftCertData.secondaryColor,
                    lowerTriangle: giftCertData.tertiaryColor,
                  }}
                  {...giftCertData}
                  id={giftCertData.id}
                  title={giftCertData.name}
                  popup={poped}
                  handleClickCallback={clickCallback}
                />
              </View>
            ))}
          </WithMargins>
        </View>
      </Layout>
    </>
  );
}
